<!--
 * @Description: 复制文章页弹窗
 * @Autor: starzhou
 * @Date: 2020-09-02 11:58:29
 * @LastEditTime: 2020-09-05 14:18:19
-->
<style scoped>
.layer {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999;
}
.fzlj-box {
  width: 508px;
  height: 685px;
  padding: 20px;
  border: 1px solid #ccd5f2;
  box-shadow: 0 0 10px 3px #e5e5e5;
  position: fixed;
  left: 50%;
  margin-left: -255px;
  top: 50%;
  margin-top: -330px;
  background: #fff;
  border-radius: 3px;
  z-index: 9999;
}
.fzlj-box .prompt-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.fzxx-list {
  width: 468px;
  margin: 0 auto;
  padding: 0 0;
  font-size: 14px;
}
.fzxx-list li {
  margin-bottom: 18px;
  list-style: none;
}
.fzxx-list li div {
  display: inline-block;
  vertical-align: top;
}
.fzxx-list li .ffxx-left {
  color: #333;
  width: 99px;
  text-align: right;
  line-height: 30px;
}
.fzxx-list li .ffxx-right input {
  width: 258px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ccd5f2;
  padding: 0 10px;
}
.fzxx-list li .ffxx-right input:focus {
  border: 1px solid #2177da;
}
.fzxx-list li .ffxx-right span {
  display: inline-block;
  width: 52px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  color: #333;
  cursor: pointer;
  border-radius: 3px;
}
.fzxx-list li .ffxx-right .ffxx-on {
  color: #fff;
  background: #2177da;
}
.ffxx-right textarea {
  overflow-x: hidden;
  border: 1px solid #ccd5f2;
  width: 335px;
  height: 80px;
  resize: none;
  padding: 10px;
}
.ffxx-right textarea:focus {
  border: 1px solid #2177da;
}
.fzxx-list .ljdz-abq a {
  color: #2177da;
  display: inline-block;
  max-width: 410px;
  vertical-align: bottom;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.fzxx-list .ljdz-abq a:hover {
  text-decoration: underline;
}
.ffxx-button {
  text-align: center;
  padding-top: 19px;
}
.ffxx-button span {
  padding: 5px 14px;
  background: #ddd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.ffxx-button span:hover {
  background: #ccc;
}
.ffxx-button .jqb-btn {
  background: #ff8901;
  color: #fff;
  margin-right: 13px;
}
.ffxx-button .jqb-btn:hover {
  background: #eb7d00;
}
.autoabstract {
  padding-left: 99px;
}
.collect-gb {
  width: 12px;
  height: 12px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  line-height: 12px;
}
</style>
<template>
  <div v-if="isVisible">
    <div class="layer" @click="hideProps"></div>
    <div class="fzlj-box">
      <div class="prompt-title">复制信息</div>
      <div class="collect-gb" @click="hideProps">
        <i class="el-icon-close"></i>
      </div>
      <ul class="fzxx-list">
        <li>
          <div class="ffxx-left">涉及行业系统：</div>
          <div class="ffxx-right">
            <input placeholder="输入行业系统名称" type="text" v-model="copyData.name" />
          </div>
        </li>
        <li>
          <div class="ffxx-left">地域：</div>
          <div class="ffxx-right">
            <input placeholder="输入相关地域" type="text" v-model="copyData.area" />
          </div>
        </li>
        <li>
          <div class="ffxx-left">事件主题词：</div>
          <div class="ffxx-right">
            <input placeholder="输入事件主题词" type="text" v-model="copyData.mainTitle" />
          </div>
        </li>
        <li>
          <div class="ffxx-left">分级：</div>
          <div class="ffxx-right">
            <span
              @click="handleOptions(item)"
              v-for="(item, index) in levelList"
              :key="index"
              :class="[copyData.source == index ? 'ffxx-on' : '']"
            >{{item}}</span>
          </div>
        </li>
        <li>
          <div class="ffxx-left">来源：</div>
          <div class="ffxx-right">
            <input placeholder="输入来源位置" type="text" v-model="copyData.scource" />
          </div>
        </li>
        <li>
          <div class="ffxx-left">标题：</div>
          <div class="ffxx-right">
            <input placeholder="输入标题文字" type="text" v-model="copyData.title" />
          </div>
        </li>
        <li>
          <div class="ffxx-left">摘要：</div>
          <div class="ffxx-right">
            <textarea name="copyContent" id="copyContent" v-model="copyData.content"></textarea>
          </div>
          <div class="autoabstract">
            <input type="checkbox" value />
            <span>发布自动摘要</span>
          </div>
        </li>
        <li>
          <div class="ffxx-left">解读：</div>
          <div class="ffxx-right">
            <textarea name="unscramble" id="unscramble" v-model="copyData.explain"></textarea>
          </div>
        </li>
        <li class="ljdz-abq">
          链接：
          <a id="copyUrl" :href="copyData.url" target="_blank">{{copyData.url}}</a>
        </li>
      </ul>
      <div class="ffxx-button">
        <span
          class="jqb-btn"
          v-clipboard:error="onError"
          v-clipboard:copy="copyText"
          v-clipboard:success="onCopy"
        >导出到剪贴板</span>
        <span class="qxfz-btn" @click="hideProps">取消</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "copy-props",
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      levelList: ["一般", "中等", "重要", "危险"],
      titleList: [
        "涉及行业系统：",
        "地域：",
        "事件主题词：",
        "分级：",
        "来源：",
        "标题：",
        "摘要：",
        "解读：",
        "链接：",
      ],
      copyData: {
        name: "",
        area: "",
        mainTitle: "",
        level: "",
        source: "一般",
        title: "",
        content: "",
        explain: "",
        url: "",
      },
    };
  },
  computed: {
    copyText() {
      let values = Object.values(this.copyData);
      let str = "";
      values.forEach((item, index) => {
        if (item) {
          str += this.titleList[index] + item + "  ";
        }
      });
      return str;
    },
  },
  methods: {
    handleOptions(item) {
      this.$set(this.copyData, "source", item);
    },
    hideProps() {
      this.$emit("update:isVisible", false);
    },
    // 复制成功
    onCopy() {
      this.$message({
        message: "复制成功！",
        type: "success",
      });
      this.hideProps();
    },
    // 复制失败
    onError() {
      this.$message({
        message: "复制失败！",
        type: "error",
      });
    },
  },
};
</script>